<template>
	<!-- #ifdef APP-NVUE -->
	<cell :renderReversePosition="listContext.props.renderReverse">
		<!-- #endif -->
		<view
			class="e-list-item"
			ref="listItemRef"
			:id="elId"
		>
			<slot />
		</view>
		<!-- #ifdef APP-NVUE -->
	</cell>
	<!-- #endif -->
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * List 列表
	 * @description 该组件为高性能列表组件
	 * @tutorial https://www.uviewui.com/components/list.html
	 * @property {String | Number}	anchor	用于滚动到指定item
	 * @example <e-list-ite v-for="(item, index) in indexList" :key="index" ></e-list-item>
	 */
	export default defineComponent({
		name: 'e-list-item',
		mixins: [mpMixin]
	})
</script>

<script lang="ts" setup>
	import {ref,reactive,computed,toRefs,watch,getCurrentInstance,inject,onMounted,onUnmounted} from 'vue'
	import {
		listItemProps
	} from './props';
	import {
		sys,
		nanoid,
		getRect,
		getNvueRect,
		type rectSize
	} from '../../libs/utils'
	import {
		throwError
	} from '../../libs/utils/_utils'
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";
	import {
		listContextKey,
		type ListItemContext
	} from '../../libs/tokens'
	
	
	const {
		listItem: listItemDefaultProps
	} = toRefs(componentsProps);
	
	const _props = defineProps(listItemProps)
	const props = useDefaultProps < DefaultProps['listItem'] > (_props, listItemDefaultProps);
	
	const listContext = inject(listContextKey)
	// #ifdef APP-NVUE
	if (!listContext) throwError('EListItem', 'e-list-item需要结合e-list组件使用')
	// #endif
	
	
	const ctx = getCurrentInstance()
	const _sys = sys()
	
	// #ifndef APP-NVUE
	// watch(() => listContext.innerScrollTop,(n) => {
	// 	const preLoadScreen = Number(listContext.props.preLoadScreen)
	// 	const windowHeight = _sys.windowHeight
	// 	if(n <= windowHeight * preLoadScreen) {
	// 		listContext.updateOffsetFromChild(0)
	// 	} else if (rect.value.top <= n - windowHeight * preLoadScreen) {
	// 		listContext.updateOffsetFromChild(rect.value.top)
	// 	}
	// })
	// #endif
	let index = 0
	const rect = ref<rectSize>({
		width:0,
		height:0,
		top:0,
		left:0,
		right:0
	})
	const resize = () => {
		queryRect().then(size => {
			const lastChild = listContext.children[index - 1]
			rect.value = size
			const preLoadScreen = Number(listContext.props.preLoadScreen)
			const windowHeight = _sys.windowHeight
			// #ifndef APP-NVUE
			if (lastChild) {
				rect.value.top = lastChild.rect.top! + lastChild.rect.height!
			}
			// if (size.top >= listContext.innerScrollTop + (1 + preLoadScreen) * windowHeight) show.value =
			// 	false
			// #endif
		})
	}
	const listItemRef = ref()
	const elId = computed(() => props.value.anchor ? `${props.value.anchor}` : nanoid(21,true))
	// 查询元素尺寸
	const queryRect = ():Promise<rectSize> => {
		return new Promise(resolve => {
			// #ifndef APP-NVUE
			getRect(ctx,`#${elId.value}`).then(size => {
				resolve(size)
			})
			// #endif
	
			// #ifdef APP-NVUE
			getNvueRect(listItemRef.value).then(size => {
				resolve(size)
			})
			// #endif
		})
	}
	
	const context: ListItemContext = reactive({
		id: elId,
		rect,
		item:listItemRef
	})

	
	// #ifdef APP-NVUE
	
	const init = () => {
		// 初始化数据
		index = listContext.getChildIndex(elId.value)
		resize()
	}
	listContext.addField(context)
	
	onMounted(() => {
		init()
		
	})
	
	onUnmounted(() => {
		listContext.removeField(context)
	})
	// #endif

</script>

<style lang="scss" scoped>
	@import "../../libs/theme/list-item.scss";
</style>
